<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
	<style>
		*{margin: 0;padding: 0;list-style: none;}
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
			zoom: 1;
		}
		body{background:url("img/main.jpg") center/cover;
			perspective: 500px;
			/*perspective-origin: center top;*/
		}
		.box{width: 250px;
			height: 270px;
			margin:200px auto 0;
			transform-style: preserve-3d;
			transform:rotateY(0deg);
			animation:run 10s infinite linear;

		}
		.box ul{width: 250px;
			height: 200px;
			position: relative;
			transform-style: preserve-3d;
			}
		.box ul li{
			position: absolute;
			width: 250px;
			height: 200px;
			background: rgba(255,0,0,0.6);
			animation:  star 5s 1;
			transition: 2s;

		}
		.box ul li img{width: 100%;height: 100%;}
		.box:hover {animation-play-state: paused;}
		/*.box ul li:hover{transform: translateZ(-200px;);}*/
		@keyframes run {
			from {transform: rotateY(0deg) }
			to{transform:rotateY(360deg);}
			}
		@keyframes star {
			from {transform: rotateY(0deg);}
			}
			}

	</style>
</head>
<body>
	<div class="box">
	 <ul>
		<li><img src="img/1.jpg"></li>
		<li><img src="img/2.jpg"></li>
		<li><img src="img/3.jpg"></li>
		<li><img src="img/4.jpg"></li>
		<li><img src="img/5.jpg"></li>
		<li><img src="img/6.jpg"></li>
		<li><img src="img/7.jpg"></li>
		<li><img src="img/8.jpg"></li>
	 </ul>
	</div>
</body>
<script>
var oli=document.querySelectorAll("li");
oli.forEach(function(item,i){
	item.style.transform="rotateY("+(i*360/oli.length)+"deg) translateZ("+(oli.length*70)+"px)";
})
</script>
</html>